<script src="<?= DOMINIO; ?>app/plugins/coolslider/js/jquery.min.js" type="text/javascript"></script>
<script src="<?= DOMINIO; ?>app/plugins/coolslider/js/quake.slider-min.js" type="text/javascript"></script>
<!--<script src="<?= DOMINIO; ?>app/plugins/coolslider/js/demo.js" type="text/javascript"></script>-->
<script type="text/javascript">
    var jq = $.noConflict();
    jq(document).ready(function() {
        jq('.quake-slider').quake({
            thumbnails: false,
            animationSpeed: 600,
            applyEffectsRandomly: true,
            navPlacement: 'outside',
            navAlwaysVisible: true,
            captionOpacity: '0',
            captionsSetup: [
                {
                    "orientation": "top",
                    "slides": [0, 1, 2],
                    "callback": captionAnimateCallback
                },
                {
                    "orientation": "bottom",
                    "slides": [4, 5],
                    "callback": captionAnimateCallback
                },
                {
                    "orientation": "right",
                    "slides": [6, 7],
                    "callback": captionAnimationCallback1
                }
            ]

        });
        function captionAnimateCallback(captionWrapper, captionContainer, orientation) {
            captionWrapper.css({right: '-990px'}).stop(true, true).animate({right: 110}, 500);
            captionContainer.css({right: '-990px'}).stop(true, true).animate({right: 110}, 500);
        }
        function captionAnimationCallback1(captionWrapper, captionContainer, orientation) {
            captionWrapper.css({top: '-500px'}).stop(true, true).animate({top: 90}, 500);
            captionContainer.css({top: '-500px'}).stop(true, true).animate({top: 90}, 500);
        }
    });
</script>


<!-- Quake Image Slider -->
<div class="quake-slider">
    <div class="quake-slider-images">
        <a target="_blank" href="javascript:">
            <img src="<?= DOMINIO; ?>app/plugins/coolslider/images/nature/1.jpg" alt="" />
        </a>
        <a target="_blank" href="javascript:">
            <img src="<?= DOMINIO; ?>app/plugins/coolslider/images/nature/2.jpg" alt="" />
        </a>
        <a target="_blank" href="javascript:">
            <img src="<?= DOMINIO; ?>app/plugins/coolslider/images/nature/3.jpg" alt="" />
        </a>
    </div>
    <div class="quake-slider-captions">
        <div class="quake-slider-caption">
            Dise&ntilde;o web y programaci&oacute;n
        </div>
        <div class="quake-slider-caption">
            Servicios integrales
        </div>
        <div class="quake-slider-caption">
            Desarrollo web
        </div>
    </div>
</div><!-- /Quake Image Slider -->
